iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0

眾所週知的彈跳視窗 Modal

Modal

看到這個名字,有玩過Bootstarp的同學應該都不陌生,沒錯就是以前的那個modal啦,在Quasar有這麼多彈跳視窗下,這個modal當然就不是單純那個彈跳視窗而已啦,就讓我們來看看吧!

引入

這次只有components的形式

framework: {
  components: ['QModal'],

  // 如果有需要用到v-close-overlay`
  directives: ['CloseOverlay']
}

範例

記得用一個按鈕或是method來將model設為true才能打開modal

全頁顯示

https://ithelp.ithome.com.tw/upload/images/20181106/20111805TkP2fjl9UN.png

<q-btn @click="model = true">Open</q-btn>

<q-modal v-model="model" content-css="padding: 50px" maximized>
  <h4>想去哪裡玩嗎?</h4>
  <p>自由行・出國度假</p>
  <p>東京、大阪、首爾、日月潭</p>
  
  <q-btn
    class="q-mt-lg"
    color="primary"
    @click="model = false"
    label="訂購行程"
  />
</q-modal>

最小視窗 (原bootstrap的形式)

https://ithelp.ithome.com.tw/upload/images/20181106/20111805gjmlfF027B.png

<q-modal v-model="model" minimized>
  <div style="padding: 20px">
    <h4>想去哪裡玩嗎?</h4>
    <p>自由行・出國度假</p>
    <p>東京、大阪、首爾、日月潭</p>
    
    <q-btn
      class="q-mt-lg"
      color="primary"
      @click="model = false"
      label="訂購行程"
    />
  </div>
</q-modal>

左側

設置position後會自動清除content-css定義的CSS

所以要在裡面多一個div來做padding
https://ithelp.ithome.com.tw/upload/images/20181106/20111805CrehNPmMtu.png

<q-modal v-model="model" position="left">
  <div style="padding: 20px">
    <h4>想去哪裡玩嗎?</h4>
    <p>自由行・出國度假</p>
    <p>東京、大阪、首爾、日月潭</p>
    
    <q-btn
      class="q-mt-lg"
      color="primary"
      @click="model = false"
      label="訂購行程"
    />
  </div>
</q-modal>

基本屬性

  • minimized, maximized

    設定視窗最小化或是最大化

  • no-route-dismiss, no-esc-dismiss ,no-backdrop-dismiss

    分別為控制 換頁、按下ESC、按黑色背景 是否會觸發關閉事件

  • content-css,content-classes

    modal內的CSS及class,不過在設定position後會無效

  • position

    設定視窗出來的位置有 top, right, bottom, left 可用

  • position-classes

    設定position後就要用這個來設class啦

    預設是items-center justify-center

  • transition, enter-class, leave-class

    可以用自定義的CSS來做出場的動畫

  • no-refocus

    使否讓關閉視窗時聚焦回到打開視窗前的最後一個元件

Vue 方法

控制打開關閉視窗的一些方法,要搭配this.$refs.視窗名稱來用

  • show
  • hide
  • toggle

事件

跟前兩天的一樣XD

  • @show 顯示時觸發
  • @hide 隱藏時觸發
  • @escape-key 按ESC時觸發

上一篇
[Day 22] Vue Quasar 彈跳視窗 2 - Dialog
下一篇
[Day 24] Vue Quasar 彈跳視窗 4 - Notify
系列文
[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言